<template>
  <div id="search-header">
    <a-row>
      <a-col :span="4"> </a-col>
      <a-col :span="20">
        <div class="search-header-content">
          <a-space size="large">
            <a-input-search
              v-model:value="content"
              style="width: 800px; margin-right: 100px"
              placeholder="请输入关键词"
              size="large"
              enter-button="搜索"
              @search="onSearch"
            />
            <a-button type="primary" @click="openaddKnowledgeModal">添加知识</a-button>
            <a-button type="primary" @click="openAddMenuModal">添加菜单</a-button>
          </a-space>
        </div>
      </a-col>
      <a-col :span="4">
        <!-- <CmeUpload @onChange="upload" /> -->
      </a-col>
    </a-row>
  </div>
  <!-- 添加知识库 -->
  <AddKnowledgeModal @closeAddKnowledgeModal="closeaddKnowledgeModal" />
  <AddMenu @closeAddMenuModal="closeAddMenuModal" />
</template>
<script lang="ts">
import { defineComponent, ref, provide } from 'vue'

import { useStore } from 'vuex'
import AddMenu from '@/components/home/headerModal/AddMenu.vue'
import AddMenuService from '@/components/home/headerService/AddMenu.service'

import AddKnowledgeModal from '@/components/home/editKnowledgeModal/AddKnowledge.vue'
import AddKonwledgeService from '@/components/home/editKnowledgeService/AddKonwledge.service'
import { key } from '@/store'

export default defineComponent({
  name: 'SearchHeader',
  components: {
    AddMenu,
    AddKnowledgeModal
  },
  setup() {
    const store = useStore(key)

    const content = ref<string>('')

    const onSearch = () => {
      store.commit('content/setSearchInfo', content.value)
    }

    /**
     * 上传
     * @param {string} url 路径
     */
    const upload = (url: string) => {
      console.log(url)
    }

    // 控制知识库添加窗口
    const { addKnowledgeState, openaddKnowledgeModal, closeaddKnowledgeModal } =
      AddKonwledgeService()
    provide('addKnowledgeState', addKnowledgeState)
    provide('closeaddKnowledgeModal', closeaddKnowledgeModal)
    // 控制菜单添加窗口
    const { addMenuState, openAddMenuModal, closeAddMenuModal } = AddMenuService()
    provide('addMenuState', addMenuState)
    provide('closeAddMenuModal', closeAddMenuModal)
    return {
      content,
      onSearch,
      upload,
      addKnowledgeState,
      openaddKnowledgeModal,
      closeaddKnowledgeModal,
      addMenuState,
      openAddMenuModal,
      closeAddMenuModal
    }
  }
})
</script>

<style>
#search-header {
  flex: 1;
  background-color: #f0f2f5;
  text-align: center;
  height: 120px;
  padding-top: 40px;
}
</style>
